<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 30px;
        }
      .a1{
        float: left;
      }
      .del1{
       float: right;
      }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-for="(item,index) in list">
         <div class="a1">{{item.name}}</div>     
         <div class="del1" @click="del(index)">删除</div>
        </div>
        <input type="text" v-model="name" placeholder="请输入您的名字">
        <button @click="add">增加</button>
     </div>
 </body>
 <script src="./vue.js"></script>
 <script>
     let{createApp,ref}=Vue;
     createApp({   
         setup(){
             let name=ref('');
             let list=ref([])
             function add(){
                 list.value.push({
                     name:name.value
                 })
                 name.value=''
             }
             function del(index){
              list.value.splice(index,1)   
             }
             return{
               name,
               list,
               add,
               del
             }
         }
     }).mount("#app")
</script>
</html>